<template>
    <div class="container">

        <!-- 搜索区域 -->
        <el-row>
            <el-form :inline="true">
                <el-form-item label="用户名称">
                    <el-input v-model="queryInfo.username" clearable @clear="queryList"
                        placeholder="请输入用户名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search">搜索</el-button>
                    <el-button type="primary" @click="toAddSystemuser">新增用户</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <!-- 表格区域 -->
        <el-table :data="systemuserList" border style="width: 100%">
            <!-- <el-table-column type="selection" width="55"></el-table-column> -->
            <!-- prop里面是实体类属性名 -->
            <el-table-column prop="id" label="ID"></el-table-column>
            <el-table-column prop="username" label="用户名">
            </el-table-column>
            <el-table-column prop="password" label="密码">
            </el-table-column>
            <el-table-column prop="nickname" label="昵称">
            </el-table-column>
            <el-table-column prop="email" label="邮箱">
            </el-table-column>
            <el-table-column prop="phone" label="手机">
            </el-table-column>
            <el-table-column prop="img" label="头像">
                <template slot-scope='scope'>
                    <el-image style="width: 100px; height: 100px"
                        :src="'http://10.10.18.137:8888/sfzy/downLoad?filename=' + scope.row.img"></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="role" label="角色">
                <template slot-scope="scope">
                    <el-tag type="primary" v-if="scope.row.role == 1">管理员</el-tag>
                    <el-tag type="primary" v-if="scope.row.role == 2">咨询师</el-tag>
                    <el-tag type="primary" v-if="scope.row.role == 3">用户</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope='scope'>
                    <el-link type="primary" @click="toEditSystemuser(scope.row)">编辑用户</el-link>
                    <el-link type="primary" @click="toDeleteSystemuser(scope.row.id)">删除用户</el-link>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="queryInfo.pageNum" :page-sizes="[1, 4, 6, 8, 10]" :page-size="queryInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
        <!-- 新增和修改的对话框 -->
        <!-- dialog中绑定close事件，实现对话框右上角叉号的取消功能 -->
        <el-dialog :title='title' :visible.sync="dialogFormVisible" @close="cancel">
            <el-form :model="systemuser">
                <!-- <el-form-item label="ID" label-width="80px" v-if="systemuser.id">
                    <el-input placeholder="请输入ID" v-model="systemuser.id"></el-input>
                </el-form-item> -->
                <el-form-item label="用户名" label-width="80px">
                    <el-input placeholder="请输入用户名" v-model="systemuser.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" label-width="80px">
                    <el-input placeholder="请输入密码" v-model="systemuser.password"></el-input>
                </el-form-item>
                <el-form-item label="昵称" label-width="80px">
                    <el-input placeholder="请输入昵称" v-model="systemuser.nickname"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" label-width="80px">
                    <el-input placeholder="请输入邮箱" v-model="systemuser.email"></el-input>
                </el-form-item>
                <el-form-item label="手机" label-width="80px">
                    <el-input placeholder="请输入手机" v-model="systemuser.phone"></el-input>
                </el-form-item>
                <el-form-item label="头像" label-width="80px">
                    <!-- <el-input placeholder="请输入头像" v-model="systemuser.img"></el-input> -->
                    <!-- <el-input placeholder="请输入文章图片" v-model="article.tabularChart"></el-input> -->
                    <!-- 
		 el-upload:上传组件
			action： 上传网址
			list-type：上传组件类型
			on-preview ： 图片预览事件
			on-remove ：移除图片事件
			el-dialog : 预览图片组件
			on-success : 上传成功后的回调函数
            file-list：就是用来展示图片路径的数组
			limit  ： 限制上传图片个数
	-->
                    <el-upload action="http://10.10.18.137:8888/sfzy/upload" list-type="picture-card"
                        :on-success="handleSuccess" :limit="1" :on-preview="handlePictureCardPreview"
                        :file-list="fileList" :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <!-- 预览图片 -->
                    <!-- dialogImageUrl预览图片的路径 -->
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>
                <el-form-item label="角色" label-width="80px">
                    <!-- <el-input placeholder="请输入角色" v-model="systemuser.role"></el-input> -->
                    <el-select v-model="systemuser.role" filterable :click="options" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="addSystemuser">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>
<script>
export default {
    data() {
        return {
            options: [{
                value: 1,
                label: '管理员'
            }, {
                value: 2,
                label: '咨询师'
            }, {
                value: 3,
                label: '用户'
            }],

            // 查询信息对象
            queryInfo: {
                username: '',
                pageNum: 1,
                pageSize: 4
            },
            total: 0,
            systemuserList: [],
            title: '添加', // 对话框标题
            dialogFormVisible: false, // 是否显示对话框
            systemuser: {
                // 文章对象
                id: "",
                userName: "",
                password: "",
                nickName: "",
                email: "",
                phone: "",
                img: "",
                role: "",
            },
            fileList: [],
            dialogVisible: false, // 预览图片的对话框
            dialogImageUrl: ''
        }
    },
    methods: {
        // 添加文章
        addSystemuser() {
            if (this.systemuser.id) { // 有值为true  修改
                // .........后面实现..............
                this.$http.post("systemuser/update", this.systemuser)
                    .then(resp => {
                        if (resp.data.status == 200) {
                            // 消息提示
                            this.$message.success('修改成功！');
                            // 清空数据
                            this.systemuser = {
                                id: "",
                                userName: "",
                                password: "",
                                nickName: "",
                                email: "",
                                phone: "",
                                img: "",
                                role: "",
                            }
                            // this.fileList = []
                            // 关闭对话框
                            this.dialogFormVisible = false;
                            // 重新查询
                            this.queryList()
                        } else {
                            this.$message.error('接口异常！')
                        }
                    })
            } else {
                this.$http.post("systemuser/insert", this.systemuser)
                    .then(resp => {
                        if (resp.data.status == 200) {
                            // 消息提示
                            this.$message.success('添加成功！');
                            // 清空数据
                            this.systemuser = {
                                id: "",
                                username: "",
                                password: "",
                                nickname: "",
                                email: "",
                                phone: "",
                                img: "",
                                role: "",
                            }
                            // this.fileList = []
                            // 关闭对话框
                            this.dialogFormVisible = false;
                            // 重新查询
                            this.queryList()
                        } else {
                            this.$message.error('接口异常！')
                        }
                    })
            }
            //  在取消函数，添加成功， 修改成功的函数中加入以下代码实现图片的清空
            this.fileList = []
        },
        // 删除文章
        toDeleteSystemuser(id) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.$http.delete('systemuser/delete/' + id)
                        .then(resp => {
                            if (resp.data.status == 200) {
                                this.$message.success(resp.data.message)
                                this.queryList()
                            } else {
                                this.$message.error(resp.data.message)
                            }
                        })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
        },
        // 进入修改的预览数据页面
        toEditSystemuser(row) {
            //console.log(row)
            // 赋值
            this.systemuser = row;
            // 设置标题
            this.title = "修改用户";
            // 开启对话框
            this.dialogFormVisible = true;


            // 动态的获取图片的名称并帮到到fileList
            //在编辑页面可以获取图片
            this.fileList = [{
                name: row.img,
                url: 'http://10.10.18.137:8888/sfzy/downLoad?filename=' + row.img
            }];
        },
        /// 取消对话框
        cancel() {
            this.queryList();
            this.dialogFormVisible = false;
            this.systemuser = {
                id: "",
                userName: "",
                password: "",
                nickName: "",
                email: "",
                phone: "",
                img: "",
                role: "",
            }
            this.fileList = []
        },
        search() {
            this.queryInfo.pageNum = 1;
            this.queryList();
        },
        // 进入添加的对话框
        toAddSystemuser() {
            this.title = "新增用户";
            this.dialogFormVisible = true;
        },
        handleSizeChange(size) {
            this.queryInfo.pageSize = size;
            console.log("size" + size)

            this.queryList();
        },
        handleCurrentChange(num) {
            this.queryInfo.pageNum = num;
            console.log('num:' + num)

            this.queryList();
        },

        // 处理上传成功的函数
        handleSuccess(response) {
            // 把上传后的图片路径，交给文章对象的tabularChart
            this.systemuser.img = response.message;
        },

        // 删除图片的事件
        handleRemove(file, fileList) {
            console.log(file, fileList);
            // 移除数据
            this.systemuser.img = '';
        },

        // 预览图片事件
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },

        // 分页查询信息的方法
        queryList() {
            console.log(this.queryInfo);
            // 调用后端接口来获取数据
            this.$http.get('systemuser/findByPage', {
                params: this.queryInfo
            })
                .then(resp => {
                    if (resp.data.status == 200) {
                        console.log(resp.data)
                        this.systemuserList = resp.data.data.list;
                        this.total = resp.data.data.total;
                        console.log(this.systemuserList)
                    } else {
                        this.$message.error('查询失败！')
                    }
                })
        }
    },
    mounted() {
        this.queryList();
    }
}
</script>
<style>
/**设置富文本编辑器的最小高度，注意style中不能使用scoped **/
.ql-container {
    min-height: 200px;
}

.el-breadcrumb {
    margin-bottom: 15px;
    padding: 0 0 15px;
    border-bottom: 1px solid #ddd;
}

.el-pagination {
    margin-top: 15px;
}

.el-link {
    padding: 0 5px;
}
</style>